<template>
    <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(page, index) of pages1" :key="index">
                <div class="icon" v-for="item of page" :key="item.id">
                    <img src="../../../assets/images/icon.png" alt="">
                    <p class="project-name">{{item.name}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'HomeIcons',
    data () {
        return {
            iconList:[
                {name: '飞机票',id:'01'},
                {name: '11111',id:'02'},
                {name: '22222',id:'03'},
                {name: '33333',id:'04'},
                {name: '44444',id:'05'},
                {name: '55555',id:'06'},
                {name: '66666',id:'07'},
                {name: '77777',id:'08'},
                {name: '88888',id:'09'},
            ],
            swiperOption:{
                autoplay: false
            }
        }
    },
    computed:{
        pages1 () {
            const pages=[];
            this.iconList.forEach((item,i)=>{
                const page=Math.floor(i/8);
                if(!pages[page]){
                    pages[page]=[]
                }
                pages[page].push(item);
            })
            return pages
        }
    }
}
</script>

<style lang="less" scoped>

    .icons{
        width: 100%;
        height: 50vw;
        /deep/ .swiper-wrapper{
            width: 100%;
            height: 50vw;
        }
        .icon{
            position: relative;
            float: left;
            width: 25%;
            height: 50%;
            img{
                display: block;
                width: 70%;
                margin-left: 15%;
                margin-top: 7px;
            }
            .project-name{
                position: absolute;
                width: 100%;
                text-align: center;
                color: #46463a;
                bottom: 0;
                left: 0;
            }
        }
    }
</style>


